<template>

    <div>
        <el-form :model="formInline" label-width="200px" class="demo-form-inline" :rules="rules" ref="ruleFormRef">

            <el-form-item label="用户" prop="names">
                <el-input v-model="formInline.names" clearable />
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="formInline.pass" clearable />
            </el-form-item>

            <el-form-item label="部门" prop="department">
                <el-select v-model="formInline.department" placeholder="选择部门">
                    <el-option label="数据一部" value=1 />
                    <el-option label="数据二部" value=2 />
                    <el-option label="数据三部" value=3 />
                    <el-option label="数据四部" value=4 />
                    <el-option label="数据五部" value=5 />
                    <el-option label="办公室" value=6 />
                    <el-option label="其他" value=7 />

                </el-select>
            </el-form-item>
            <el-form-item label="职务" prop="position">
                <el-select v-model="formInline.position" placeholder="选择">
                    <el-option label="项目负责人" value=0 />
                    <el-option label="部门经理" value=1 />
                    <el-option label="高级管理" value=2 />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { gettables, gettablebm, changelist, addlist, addusers } from '../../sevce/user'
import { defineProps, onMounted, ref, computed } from 'vue';
import { ElMessage } from 'element-plus'
const formInline = reactive({
    names: '',
    pass: '',
    department: '',
    position: '',
    telephone: 1,
    permissionId: 0,
})
//表单校验
const ruleFormRef = ref()
const rules = reactive({
    names: [
        {
            required: true,
            message: '不能为空',
            trigger: 'blur',
        },
    ],
    pass: [
        {
            required: true,
            message: '不能为空',
            trigger: 'blur',
        },
    ],
    department: [
        {
            required: true,
            message: '不能为空',
            trigger: 'blur',
        },
    ],
    position: [
        {
            required: true,
            message: '不能为空',
            trigger: 'blur',
        },
    ],
})

const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            addusers(formInline).then((res) => {
                if (res.data == 0) {
                    ElMessage.error('添加失败')
                } else if (res.data == 1) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                }
            }).catch(() => {
                ElMessage.error('出错了，请联系管理员')
            })
        } else {
            ElMessage.error('信息填写不完整')
        }
    })
}



onMounted(() => {
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
